import React, {useState} from 'react';
import ReactEcharts from 'echarts-for-react';
import {Spin} from 'antd';
import moment from 'moment';
import {cloneDeep} from 'lodash';
import {colorPalette} from './helper.js';

const defaultAxisLabel = {
    show: true,
};

const defaultHandleSeries = series => {
    if (series.length > 1) {
        series[1].yAxisIndex = 1;
    }
    return series;
};

export default props => {
    const {
        loading,
        chartData,
        style = {height: '380px'},
        rightYAxisLabel = defaultAxisLabel,
        handleClick = () => {},
        handleSeries = defaultHandleSeries,
        dataZoom = false,
        gridBottom = 60,
    } = props;

    const {legend, xAxis, yAxis = [], series} = chartData.chart ?? {};

    const {
        formatter = value => value
    } = rightYAxisLabel;

    const formatFunctionMap = {
        0: value => (value),
        1: formatter
    };

    const yAxisData = cloneDeep(yAxis);

    if (yAxisData?.length <= 0) {
        yAxisData[0] = {type: 'value', name: ''};
    }

    // 针对双y轴处理
    yAxisData[1] = {
        type: 'value',
        name: '',
        axisLabel: rightYAxisLabel,
        splitLine: {
            show: false
        }
    };


    const option = {
        color: colorPalette,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                },
                label: {
                    show: false
                }
            },
            // formatter(params) {
            //     const date = params[0].axisValue;
            //     let result =
            //         `${date}<br/>`;
            //     result += params
            //         ?.map(entry =>{
            //             console.log(entry);
            //             return `${entry.marker} ${entry.seriesName} ${formatFunctionMap[entry.seriesIndex](entry.data.value)}`;
            //         });

            //     return result;
            // }
        },
        legend: {
            ...legend,
            top: 17,
            left: 20,
        },
        dataZoom: dataZoom && [
            {
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                start: 1,
                end: 100,
            },
            {
                type: 'inside',
                show: true,
                xAxisIndex: [0],
                start: 1,
                end: 100
            },
        ],
        grid: {
            containLabel: false,
            bottom: gridBottom,
        },
        xAxis,
        yAxis: yAxisData,
        series: handleSeries(series)
    };


    if (option) {
        return (
            <Spin spinning={loading}>
                <ReactEcharts
                    className="chartContainer"
                    option={option}
                    style={style}
                    onEvents={{
                        click: handleClick
                    }}
                />
            </Spin>
        );
    }
    return <Spin spinning className="chartContainer" />;
};
